<template>
  <div class="address-tpl">
    <form>
      <div class="public-list">
        <div class="public-list-item">
          <div class="content">
            <span class="txt label">客户名称</span>
            <input v-model="addressForm.name" type="text" class="edit-input" placeholder="请填写客户名称">
          </div>
        </div>
        <div class="public-list-item">
          <div class="content">
            <span class="txt label">收货人</span>
            <input v-model="addressForm.address_name" type="text" class="edit-input" placeholder="请填写收货人的姓名">
          </div>
        </div>
        <div class="public-list-item">
          <div class="content">
            <span class="txt label">手机号</span>
            <input v-model="addressForm.address_mobile" type="text" class="edit-input" placeholder="请填写收货人手机号码">
          </div>
        </div>
        <div class="public-list-item">
          <div class="content" @click="showSelectCity">
            <span class="txt label">地区信息</span>
            <get-address ref="selectAddress" class="fr address" @getAddressInfo="getAddressInfo"/>
          </div>
        </div>
        <div class="public-list-item">
          <div class="content">
            <span class="txt label">详细地址</span>
            <input v-model="addressForm.address_detail" type="text" class="edit-input" placeholder="街道门牌信息">
          </div>
        </div>
      </div>
    </form>
    <div class="public-list mgt10">
      <div class="public-list-item">
        <div class="content">
          <span class="txt label">设为默认地址</span>
          <div class="fr switch">
            <yd-switch v-model="addressForm.is_default" true-value="1" false-value="0" color="#FF7340" size="small"/>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isShowBtn" class="bottom-btn">
      <div v-if="pageStatus == 'add'" class="btnBg" @click="addAddress">提 交</div>
      <div v-else class="btnBg" @click="editAddress">保 存</div>
    </div>
  </div>
</template>

<script>
import getAddress from '@/components/GetAddress'
import { PutEditUserAddress, PostAddUserAddress } from '@/api/user'
export default {
  name: 'Index',
  components: {
    getAddress
  },
  data() {
    return {
      addressForm: {
        pageStatus: '',
        name: '',
        province_id: '',
        city_id: '',
        area_id: '',
        address_name: '',
        address_mobile: '',
        address_tel: '',
        address_detail: '',
        is_default: 0
      },
      isShowBtn: true
    }
  },
  created() {
    this.whichRoute()
  },
  mounted() {
    window.addEventListener('resize', () => {
      console.log('resize')
      this.isShowBtn = !this.isShowBtn
    })
  },
  methods: {
    whichRoute() {
      const route = this.$route
      if (route.name === 'add-address') {
        this.pageStatus = 'add'
      } else {
        this.pageStatus = 'edit'
      }
    },
    showSelectCity() {
      this.$refs.selectAddress.showCity = true
    },
    // 新增地址
    addAddress() {
      this.$toast.loading({
        duration: 1000,
        mask: true,
        message: '正在提交...'
      })
      PostAddUserAddress(this.addressForm).then(res => {
        this.$toast.clear()
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            message: data.message,
            duration: 1500
          })
          this.goToList()
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    // 编辑地址
    editAddress() {
      this.$toast.loading({
        duration: 10000,
        mask: true,
        message: '正在提交...'
      })
      PutEditUserAddress(this.addressForm).then(res => {
        this.$toast.clear()
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            message: data.message,
            duration: 1500
          })
          this.goToList()
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    // 地址组件抛出的地址数据
    getAddressInfo(val) {
      this.addressForm.province_id = val.itemValue1
      this.addressForm.city_id = val.itemValue2
      this.addressForm.area_id = val.itemValue3
    },
    goToList() {
      this.$router.push({
        name: 'user-address',
        query: { type: this.$route.query.type ? this.$route.query.type : '' }
      })
    }
  }
}

</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .address-tpl{
    padding-bottom: pxCalc(60px);
    background-color: #fff;
  }// 按钮背景
  .bottom-btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9;
  }
</style>
